<template>
  <div id="Summary">
    <div class="sum-body">
      <div class="sb-header">
        <h5>汇总数据</h5>
      </div>
      <div class="sb-middle">
        <span>小区</span>
        <el-select v-model="sbvalue" placeholder="请选择小区">
          <el-option v-for="sbitem in sboptions" :key="sbitem.sbvalue" :label="sbitem.sblabel" :value="sbitem.sbvalue">

          </el-option>
        </el-select>
        <span>日期</span>
        <el-date-picker v-model="datevalue" type="date" placeholder="选择日期"></el-date-picker>
        <div class="mid-right">
        	<button class="rbtn1">搜索</button>
        	<button class="rbtn2">导出</button>
        </div>
      </div>
      <div class="sb-footer">
      	<el-table :data="tableData" border style="width: 100%" height="50vh">
          <el-table-column prop="address" label="小区" align="center" width="260px">
          </el-table-column>
          <el-table-column prop="target" label="目标样本" align="center">          	
          </el-table-column>
          <el-table-column prop="effective" label="有效样本" align="center">
          </el-table-column>
          <el-table-column prop="satisfied" label="满意样本" align="center">
          </el-table-column>
          <el-table-column prop="satisfieds" label="满意率" align="center">
          </el-table-column>
          <el-table-column prop="time" label="日期" align="center">            
          </el-table-column>
        </el-table>
      </div>
      <div class="sb-page">
      	<div class="sp-left">
      		<span>共 {{totalAmount/10}}页</span>
      	</div>
      	<div class="sp-right">
      		<el-pagination
  					background
  					layout="prev, pager, next"
  					:total="totalAmount"
  				>
					</el-pagination>
      	</div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
    data() {
      return {
      	totalAmount: 50,
      	datevalue: '',
        page: 66,
        //小区下拉框数据
        sboptions: [{
          sbvalue: '选项1',
          sblabel: '深圳市雅居乐'
        }, {
          sbvalue: '选项2',
          sblabel: '河源市快乐迪'
        }, {
          sbvalue: '选项3',
          sblabel: '东莞市碧桂园'
        }],
        sbvalue: '',
        //表格内容区域
        tableData: [{
          address: '1小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '2小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '3小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '4小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '5小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '6小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '7小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '8小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '9小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        },{
          address: '10小区',
          target: 1000,
          effective: 1000,
          satisfied: 200,
          satisfieds: '20%',
          time: '2018-06-10'
        }]
      }
    }
  }
</script>

<style scoped="scoped">
#Summary{
	width: 99%;
	height: 87vh;
	border-top: none;
	position: relative;
	overflow: auto;
}
.sum-body .sb-header h5{
	padding-left: 30px;
	padding-bottom: 10px;
	margin-top: 10px;
	box-sizing: border-box;
	font-size: 18px;
	font-weight: normal;
}
.sum-body .sb-middle{
	margin-top: -20px;
	margin-left: 30px;
	padding: 5px 0;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
	position: relative;
}
.sum-body .b-middle span{
	font-size: 14px;
	margin-right: 10px;
}
.sum-body .sb-middle .el-select{
	width: 150px;
	vertical-align: middle;
	margin-right: 10px;
}
.sb-middle .mid-right{
	position: absolute;
	right: 0;
	top: 5px;
	margin-right: 20px;
}
.mid-right button{
	padding: 8px 40px;
	border-radius: 5px;
	font-size: 15px;
	margin-top: -6px;
	outline: none;
	cursor: pointer;
}
.mid-right .rbtn1{
	border: none;
	background-color: rgb(22, 155, 213);
	color: #fff;	
	margin-right: 10px;
}
.mid-right .rbtn2{
	border: 1px solid #ccc;
	background-color: #fff;
}

.sum-body .sb-footer{
	margin-left: 30px;
	margin-top: 25px;
	margin-right: 20px;
}
.sum-body .sb-page {
  margin-top: 20px;
  margin-left: 40px;
  margin-right: 20px;
}
.sb-page span{
	font-size: 14px;
}
.sb-page .sp-left{
	float: left;
}
.sb-page .sp-right{
	float: right;
}
.sb-page .sp-right input[type="text"]{
	height: 25px;
	line-height: 25px;
	width: 60px;
	text-align: center;
	outline: none;
}
.sb-page .sp-right span:hover{
	text-decoration: underline;
	cursor: pointer;
}
</style>